import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Modal, Upload } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";

import { SearchCol, SearchRow, MyButton } from '@/styled/form';

import { inject_unount } from '@/utils/middleware';

import { DICT } from '../enum';
import styles from '@/styled/form.less';
import { DropDownSelect } from '@/components/DropDownSelect';

interface Props extends FormComponentProps {
  dispatch?: Function,
  history?: any,
  dict?: any,
  data?: {
    id: string,
    buildId: string,
    floorPlan: string
  },
  location?: any,
  file?: {
    data: Array<string>,
    message: boolean;
  },
  buttons?: Array<any>;
  wrappedComponentRef?: any;
  visible?: boolean;
  onCancel?: Function;
  onCreate?: Function;
}

@connect(({ account, upload, routing }) => ({
  dict: account.dict,
  file: upload.filesValue,
  location: routing.location,
}))
@inject_unount
class FormItem extends Component<Props, any> {
  state = {
    confirmDirty: false,
    autoCompleteResult: [],
    isNew: true,
    fileList: [],
    confirmLoading: false,
  };
  formRef: any;

  componentDidMount() {
    const { data, form, dispatch } = this.props;

    dispatch({
      type: 'account/init', payload: {
        dict: { keyList: DICT },
        url: data ? data.floorPlan : null
      }
    })

    if (data) {
      const { id, buildId, floorPlan, ...items } = data;
      form.setFieldsValue(items)
    }
  }

  onCancel = () => {
    
    this.setState({
      confirmLoading: false,
      visible: false,
      fileList: [],
    }, () => this.props.onCancel())
  };

  onCreate = () => {
    const { fileList } = this.state;
    const formData = new FormData();
    fileList.forEach(file => {
      formData.append('files[]', file);
    });

    this.setState({ confirmLoading: true })


    const { dispatch } = this.props;
    dispatch({ type: 'upload/uploadAll', payload: fileList }).then(() => {
      const { file } = this.props;

      file.message && this.setState({
        confirmLoading: false,
        visible: false,
        fileList: [],
      }, () => this.props.onCreate(file.data, fileList.map(v => v.name)))
    })
  }

  render() {
    const { form, visible, dict = {} } = this.props;

    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 16 },
      },
    };

    const { fileList } = this.state;

    const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    return (
      <Modal
        visible={visible}
        title="上传"
        okText="保存"
        cancelText="取消"
        width={800}
        bodyStyle={{ height: '360px' }}
        destroyOnClose={true}
        onCancel={this.onCancel}
        onOk={this.onCreate}
      >
        <Form>
          <SearchRow>
          <SearchCol key={1} span={24}>
            <Form.Item
              label="台账类型"
              {...formItemLayout}
            >
              {getFieldDecorator('type', {
                rules: [{ required: true, message: '请选择类型' }],
              })(
                DropDownSelect(dict, 'fire.account.type')
              )}
            </Form.Item>
          </SearchCol>
            <SearchCol span={24}>
              <Form.Item
                {...formItemLayout}
                label='选择文件'
                className={styles.fileRequire}
              >
                <Upload
                  {...props}
                >
                  <MyButton icon="select" style={{ marginRight: '5px' }}>导入</MyButton>
                </Upload>
              </Form.Item>
            </SearchCol>
          </SearchRow>
        </Form>
      </Modal>
    );
  }
}

const FormList = Form.create<Props>({ name: 'form_in_modal' })(FormItem);
export default FormList;
